﻿@{
    Layout = null;
    ViewData["Title"] = "IndexFind";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<h1>薪酬标准查询</h1>

<div id="app">
    <el-form ref="SalaryStandardDimPage" :model="SalaryStandardDimPage" :rules="rules" label-width="120px">
        <el-row :gutter="20">
            <el-col :span="11">
                <el-form-item label="薪酬标准编号">
                    <el-input v-model="SalaryStandardDimPage.standard_id" placeholder="请输入薪酬标准编号"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="11">
                <el-form-item label="关键字">
                    <el-input v-model="SalaryStandardDimPage.key_word" placeholder="请输入关键字"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="16">
                <el-form-item label="建档时间">
                    <el-date-picker v-model="SalaryStandardDimPage.find_time"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" v-on:click="handleFind()">查询</el-button>
                <el-button type="info" v-on:click="handleHidden" style="margin-left:20px">收起</el-button>
            </el-col>
        </el-row>
    </el-form>
    @*查询结果表格*@
    <div v-if="tabhid">
        <el-table :data="salary_standards"
                  height="250"
                  border
                  style="width: 100%">
            <el-table-column prop="standard_id" label="薪酬标准编号" width="204">
            </el-table-column>
            <el-table-column prop="standard_name" label="薪酬标准名称" width="204">
            </el-table-column>
            <el-table-column prop="designer" label="制定人" width="204">
            </el-table-column>
            <el-table-column prop="regist_time" label="登记时间" width="204" :formatter="datetimeFiltr">
            </el-table-column>
            <el-table-column prop="salary_sum" label="薪酬总额" width="204">
            </el-table-column>
        </el-table>
        <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="pgcurrent"
                       :page-sizes="[3, 6, 9, 11]"
                       :page-size="pgsize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="rows">
        </el-pagination>
    </div>
</div>


<script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data: {
            //薪酬标准基本信息表
            SalaryStandardDimPage: {
                ssd_id: '',//主键，自动增长列
                standard_id: '',//薪酬标准单编号
                key_word: '',
                find_time: '',
            },
            //薪酬表单数据源
            salary_standards: [],
            rules: {
                standard_id: [
                    { required: true, message: "请填写复核意见！", trigger: 'blur' }
                ],
            },
            //表单显示标记
            tabhid: false,
            pgsize: 3,
            pgcurrent: 1,
            rows: 0,
        },
        methods: {
            //查询按钮的点击事件
            handleFind() {
                //console.info("salary_standard.open_time:", this.SalaryStandardDimPage.find_time);
                if (this.SalaryStandardDimPage.find_time == null) {
                    //若点击了叉叉按钮清空了时间控件值，则需要赋空操作，倘若为null会有bug，无法获取数组里的值进行提交
                    this.SalaryStandardDimPage.find_time = '';
                };
                axios.post("/SalaryStandard/SalaryStandardDimFind", {
                    id: this.SalaryStandardDimPage.standard_id,
                    key_word: this.SalaryStandardDimPage.key_word,
                    open_time: this.SalaryStandardDimPage.find_time[0],
                    close_time: this.SalaryStandardDimPage.find_time[1],
                    pgsize: this.pgsize,
                    pgcurrent: this.pgcurrent,
                    uqFlag:1,
                }).then((res) => {
                    if (res.data.tabs != null) {
                        console.info(res.data);
                        //赋值给分页和表单数据源
                        this.salary_standards = res.data.tabs;
                        this.rows = res.data.rows;
                        //打开表单
                        this.tabhid = true;
                    } else {
                        this.salary_standards = [];
                    }
                })
            },
            //收起表单按钮
            handleHidden() {
                this.tabhid = false;
            },
            //时间过滤器
            datetimeFiltr(row, column) {
                //拿到该行该列的prop值，将日期过滤重新赋值
                let data = row[column.property]
                let dt = new Date(data)
                return dt.getFullYear() + '年' + (dt.getMonth() + 1) + '月' + dt.getDate() + "日"
            },
            //页面容量改变事件
            handleSizeChange(val) {
                this.pgsize = val;
                console.info("页面容量改变事件：", val);
                this.handleFind();
            },
            //页面下标改变事件
            handleCurrentChange(val) {
                this.pgcurrent = val;
                console.info("页面下标改变事件：", val);
                this.handleFind();
            },
        },
        mounted: function() {

        }

    })


</script>